<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1"/>
    <title>USA Unemployment Choropleth</title>
    <link rel="stylesheet" type="text/css" href="../../css/styles.css"/>
    <script type="text/javascript" src="../../lib/d3.js"></script>
    <script src="https://d3js.org/topojson.v2.js"></script>

    <style>
        .states {
            fill: none;
            stroke: #fff;
            stroke-linejoin: round;
        }
    </style>
</head>

<body>

<script type="text/javascript">
    var width = 960,
            height = 500;

    var color = d3.scaleThreshold()
            .domain([.02, .04, .06, .08, .10]) // <-A
            .range(["#f2f0f7", "#dadaeb", "#bcbddc",
                    "#9e9ac8", "#756bb1", "#54278f"]);

    var projection = d3.geoAlbersUsa();

    var path = d3.geoPath()
            .projection(projection);

    var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height);

    var g = svg.append("g")
            .call(d3.zoom()
            .scaleExtent([1, 10])
            .on("zoom", zoomHandler));

    d3.json("../../data/us.json", function (error, us) { // <-B
        d3.tsv("../../data/unemployment.tsv",
                function (error, unemployment) {
            var rateById = {};

            unemployment.forEach(function (d) { // <-C
                rateById[d.id] = +d.rate;
            });

            g.append("g")
                    .attr("class", "counties")
                    .selectAll("path")
                    .data(topojson.feature(us,
                            us.objects.counties).features)
                    .enter().append("path")
                    .attr("d", path)
                    .style("fill", function (d) {
                        return color(rateById[d.id]); // <-D
                    });

            g.append("path")
                    .datum(topojson.mesh(us, // <-E
                            us.objects.states,
                             function(a, b) { return a !== b; }))
                    .attr("class", "states")
                    .attr("d", path);
        });
    });

    function zoomHandler() {
        var transform = d3.event.transform;

        g.attr("transform", "translate("
                + transform.x + "," + transform.y
                + ")scale(" + transform.k + ")");
    }
</script>

</body>

</html>